<%--
  Created by IntelliJ IDEA.
  User: 82147
  Date: 2020/12/17
  Time: 21:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>指定类型物品被用户的操作类型</title>
    <%--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>--%>
    <%--    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>--%>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!--<button id="search">查询</button>-->
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1500px;height:700px;top:1px;left: 0px;"></div>

<script type="text/javascript">

    $(document).ready(function () {

        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('main'));

        option = {
            color: ['#3398db'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },

            xAxis: [
                {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Tue', 'Wed', 'Thu','Sat']

                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    barWidth: '60%',
                    data: [10, 52, 200, 334, 390, 330]
                }
            ]
        };


        // 页面加载完毕之后，通过ajax加载图标的数据
        $.ajax({
            url: 'topn',
            method: "get",
            type: "json",
            success: function (data) {
                option.series[0] = data.series;
                option.xAxis=data.xAxis;
                option.yAxis=data.yAxis;
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(data);
            },
            error: function (errMsg) {
                console.error(errMsg)
            }
        });

        /*
        // 为按钮添加点击事件，点击事件中，可以重新加载新数据，并且新加载的数据使用post方法
        $("#search").click(function () {
            $.ajax({
                url: 'useraction',
                method: "post",
                type: "json",
                success: function (data) {
                    option.series[0] = data.series;
                    option.legend.data = data.legend;
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                error: function (errMsg) {
                    console.error(errMsg)
                }
            });
        });
*/
    })

</script>
</body>
</html>

